import React, { useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { ToolTableListItem } from './data';
import toolList from "../funcs/toollist"
import VersionForm from './versiondetail';

const TableList: React.FC<{}> = () => {
  const [versionModalVisible, handleVersionModalVisible] = useState<boolean>(false);
  const [productnumber, setProuctnumber] = useState<any>();
  const [filename, setFilename] = useState<any>();
  const actionRef = useRef<ActionType>();
  const columns: ProColumns<ToolTableListItem>[] = [
    {
      title: "软件名称",
      dataIndex: 'file_name',
      valueType: 'textarea',
    },
    {
      title: "产品名称",
      dataIndex: 'product_number',
      valueType: 'textarea',
    },
    {
      title: "操作",
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={async() => {
                setProuctnumber(record.product_number);
                setFilename(record.file_name);
                handleVersionModalVisible(true);
            }}
          >
          版本详情
          </a>
        </>
      ),
    },
  ];

  return (
    <PageContainer>
      <ProTable<ToolTableListItem>
        headerTitle={"工具软件检索"}
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        request={(params, sorter, filter) => toolList({ ...params, sorter, filter })}
        columns={columns}
      />
      <VersionForm
        onCancel={() => {
          handleVersionModalVisible(false);
        }}
        versionModalVisible={versionModalVisible}
        product_number={productnumber}
        file_name={filename}
      />
    </PageContainer>
  );
};

export default TableList;
